---
title: Media Queries
description: Learn about media queries in Unistyles 3.0
---

import { Card } from '@astrojs/starlight/components'
import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Media Queries',
        description: 'Learn about media queries in Unistyles 3.0'
    }}
>

Media queries provide more power and allow you to style cross-platform apps with pixel-perfect accuracy.

### Basic usage

To use media queries, you need to import the `mq` utility and convert your value to an `object`:

```diff lang="tsx" /mq/ del="backgroundColor: theme.colors.background,"  ins="backgroundColor: {"
import { Stylesheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
+            [mq.only.width(240, 380)]: theme.colors.background,
+            [mq.only.width(380)]: theme.colors.barbie
+       }
    }
}))
```

The `mq` utility provides Intellisense for quickly building your media queries.

### Advanced usage

You can also combine `width` media queries with `height` media queries:

```tsx /mq/
import { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.width(240, 380).and.height(300)]: theme.colors.background,
            [mq.width(380).and.height(300)]: theme.colors.barbie
        }
    }
}))
```

Or use only `height` media queries:

```tsx /mq/
import { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(300, 500)]: theme.colors.background,
            [mq.only.height(500)]: theme.colors.barbie
        }
    }
}))
```

You can also reuse your defined [breakpoints](/v3/references/breakpoints/):

```tsx /xl/
import { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(500)]: theme.colors.background,
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))
```

### Reference

```shell title="Available combinations"
mq.only.width // target only width
mq.only.height // target only height
mq.width(...).and.height(...) // target both width and height
mq.height(...).and.width(...) // target both height and width
```

```shell title="Available values"
(100, 200) // from 100 to 199
(400, 'xl') // from 400 to 'xl' breakpoint
('sm', 'md') // from 'sm' to 'md' breakpoint
(undefined, 1000) // from 0 to 999
(null, 800) // from 0 to 799
(500) // from 500 onwards
```

```shell title="Full example"
mq.only.width(100, 200) // width from 100 to 199
mq.height(500).and.width('sm') // heigh from 500 onwards and width from 'sm' breakpoint onwards
mq.only.height(null, 1000) // height from 0 to 999
```

:::tip
If you pass an invalid range to mq utility eg. ('xl', 'sm') or (500, 200) the media query will be marked as invalid and won't be used to resolve your styles.
:::

### Combining media queries with breakpoints

You can mix media queries with breakpoints, but media queries will always have higher priority:

```tsx
import { StyleSheet, mq} from 'react-native-unistyles'

const styles = Stylesheet.create(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: {
            sm: theme.colors.background,
            // Unistyles will firsly resolve to this style, even though 'sm' breakpoint may be also correct
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))
```

### CSS Media Queries

`Breakpoints` and `Media Queries` will be auto converted to Web CSS media queries. Learn more about [Web Media Queries](/v3/references/web-styles#how-it-works).

</Seo>
